{% extends "auth.html" %}

{% block regular_content %}
<div>
    <div class="flex flex-col gap-4">
        <button class="back-btn" id="go_back_button" data-cy="go_back_button" onclick="window.location.href = '/for-teachers'">
            <span class="fa fa-arrow-{% if g.dir == " ltr" %}right{% else %}left{% endif %}">&nbsp;</span>
            {{_('go_back')}}
        </button>
        {% if second_teacher %}<h1>{{_('role')}}: {{role}}</h1>{% endif %}
        <div class="flex flex-col md:flex-row items-left md:items-center justify-between">
            <h1>{{ class_info.name }}</h1>
            <div class="flex flex-col md:flex-row gap-2">
                <button class="green-btn w-fit" id="customize_class_button" data-cy="customize_class_button"
                    onclick="window.location.href = '/for-teachers/customize-class/{{class_info.id}}'">
                    {{_('customize_class')}}
                </button>                
            </div>
        </div>
        {{ render_partial('customize-grid/partial-grid-levels.html',
                            class_info=class_info,
                            max_level=max_level,
                            adventure_names=adventure_names,
                            adventures_default_order=adventures_default_order,
                            class_id=class_id,
                            level=level|string,
                            class_adventures=class_adventures,
                            adventure_table=adventure_table,
                            students_info=students_info)
        }}
        <!-- Second teachers' table -->
        {% if is_teacher and class_info.second_teachers %}
        <div id="second_teachers_container" data-cy="second_teachers_container" class="pt-4">
          <h2>{{ _('teachers')}}</h2>
          {% if class_info.teacher == username and class_info.second_teachers|length > 1 %}<p class="text-red-500 mt-0 mb-2">{{_('second_teacher_warning')}}</p>{% endif %}
          <div class="w-full overflow-x-auto border rounded-lg">
            <table class="w-full">
            <thead>
              <tr class="bg-blue-300 text-blue-900">
                <th class="px-2 py-2 text-center" id="username_header">{{_('username')}}</th>
                <th class="px-2 py-2 text-center" id="role">{{_('role')}}</th>
                <th class="px-2 py-2 text-center" id="overview_header">{{_('programs')}}</th>
                {% if not is_second_teacher and class_info.teacher == username %}<th class="px-2 p-2 bg-blue-900 text-white text-center" id="remove_second_teacher_header">{{_('remove')}}</th>{% endif %}
            </tr>
            </thead>
            <tbody id="class_user_table">
              {% for second_teacher in class_info.second_teachers %}
              <tr class="{% if loop.index is divisibleby 2 %}bg-gray-200{% else %}bg-white{% endif %} m-2">
                <td class="p-2 text-center font-medium text-blue-900" data-cy="second_teacher_username_cell">{{second_teacher.username}}</td>
                <td class="text-center" id="role_cell">{% if second_teacher.username == class_info.teacher %}{{_('creator').lower()}}{% else %}{{second_teacher.role}}{% endif %}</td>
                {% if second_teacher.username != username %}
                  <td class="text-center"><a href="/for-teachers/class/{{class_info.id}}/programs/{{second_teacher.username}}" data-cy="programs"
                     ><span class="fas fa-code block mb-4 mt-4 text-blue-900"></span></a></td>
                {% else %}
                  <td class="text-center"><a href="/programs" data-cy="programs"><span class="text-blue-900 fas fa-code block mb-4 mt-4"></span></a></td>
                {% endif %}
                <td class="text-center">
                  {% if second_teacher.username != class_info.teacher %}<a href="#" class="no-underline" id="remove_second_teacher "
                  hx-swap="none"
                  {# TODO: 
                    - figure a new way of showing modal instead of calling js
                    - remove container instead of reloading if only one el exists.
                    #}
                  hx-confirm="{{_('remove_user_prompt')}}"
                  hx-delete="/class/{{class_info['id']}}/second-teacher/{{second_teacher['username']}}"
                  _="on htmx:afterRequest if detail.xhr.status == 205 then window.location.reload()"
                  ><i class="fa-solid fa-trash text-red-500"></i></a>{% else %}--{% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
            </table>
          </div>
        </div>
      {% endif %}
      {% if class_info.teacher == username %}
              <button class="green-btn w-fit mt-4" data-cy="add_second_teacher" onclick='hedyApp.invite_to_class("{{class_info.id}}", {{_('second_teacher_prompt')|default(None)|tojson}}, "second_teacher")'>{{_('invite_teacher')}}</button>
      {% endif %}
      {{ render_partial('htmx-invite-list.html', invites=invites, is_second_teacher=is_second_teacher, class_id=class_info.id) }}
{% endblock %}
